<template>
	<view class="home">
		
		<swiper indicator-dots circular>
			<swiper-item v-for="(item, index) in data.swipers" >
				<image :src="item.img"></image>
			</swiper-item>
		</swiper>
		
		<!-- 导航区域 -->
		<view class="nav">
			
			
			<view class="nav-item" v-for="item in data.navs" @click="methods.navItemClick(item.path)">
				<view :class="item.icon"></view>
				<text>{{item.title}}</text>
			</view>
			
		</view>
		
		<!-- 推荐商品 -->
		<view class="hot-goods">
			<view class="title">推荐商品</view>
			<goodsList :goods="data.goods" @goodsItemClick="methods.goGoodsDetail" /> <!--使用$emit，注意不要methods.goGoodsDetail() -->
		</view>
	</view>
</template>

<script setup>
import { reactive } from "vue";
import {apiRequest} from '../../utils/apiRequest.js'
import { onShow, onHide,onLoad } from "@dcloudio/uni-app"

import goodsList from '../../conponents/goodsListItem/goodsListItem.vue'
	const data = reactive({
		swipers:['132','22','332'],
		goods:[],
		navs:[
			{
				icon:'iconfont icon-ziyuan',
				title:'dzbook超市',
				path:'/pages/goods/goods'
			},
			{
				icon:'iconfont icon-guanyuwomen',
				title:'联系我们',
				path:'/pages/contact/contact'
			},
			{
				icon:'iconfont icon-tupian',
				title:'社区图片',
				path:'/pages/pics/pics'
			},
			{
				icon:'iconfont icon-shipin',
				title:'学习视频',
				path:'/pages/videos/videos'
			},
		]
	})
	onLoad(() => {
		methods.getSwipers()
		methods.getGoods()
	})
	const methods = {
		getSwipers(){
			apiRequest({
				url:'/api/getlunbo',
			}).then(res => {
				data.swipers = res.data.message
			})
		},
		getGoods(){
			apiRequest({
				url:'/api/getgoods?pageindex=1'
			}).then(res => {
				data.goods = res.data.message
			})
		},
		// 路由跳转
		navItemClick(url){
			uni.navigateTo({url})
		},
		
		// 跳转到商品详情页
		goGoodsDetail(id){
			uni.navigateTo({
				url:'/pages/goods-detail/goods-detail?id=' + id
			})
		}
	}
	
</script>

<style lang="scss">
	.home{
		background:$shop-color;
		swiper{
			width: 750rpx;
			height: 380rpx;
		}
		image{
			height: 100%;
			width: 100%;
		}
		.nav{
			display: flex;
			justify-content: space-around;
			background: white;
			.nav-item{
				text-align: center;
				width: 25%;
				view{
					width: 120rpx;
					height: 120rpx;
					background:#262626;
					color: white;
					border-radius: 50%;
					margin: 10px auto;
					font-size: 50rpx;
					line-height: 120rpx;
				}
				.icon-tupian{
					font-size: 45rpx;
				}
				text{
					font-size: 30rpx;
				}
			}
		}
	}
	.hot-goods{
		background-color:shop-color;
	}
	.title{
		margin: 15px 0;
		text-align: center;
		background: white;
		height: 50px;
		line-height: 50px;
		font-size: 20px;
		letter-spacing: 20px;
		
	}
</style>
